<template>
  <div class="collapseEcharts">
    <el-collapse v-model="activeNames" @change="handelChange">
      <el-collapse-item ref="tasks">
        <div class="retract" @click="retractTasks()" />
        <template slot="title">
          <el-badge :is-dot="true" type="warning" class="item">{{
            item.name
          }}</el-badge>
          <div class="refreshIcon" @click.stop="handelRefresh">
            <img :src="require('@/assets/images/refreshIcon.png')" />
          </div>
          <div class="icondown2Box">
            <!-- <i class="iconfont iconzhcc_xiangxiajiantou-copy" /> -->
            <img :src="require('@/assets/images/down.png')" class="downIcon" />
          </div>
        </template>
        <div class="task-content">
          <template>
            <div class="echartsBox-collapse">
              <div>
                <echartsBar
                  :echartsName="`echartsBar-collapse-` + index + '-'"
                  :collapse="true"
                  :studyCount="studyCount"
                  :taskCount="ntaskCount"
                  :finshCount="nfinshCount"
                  :start="0"
                  :end="100"
                  :smallCharts="true"
                />
              </div>
              <div>
                <echartsLine
                  :echartsName="`echartsLine-collapse-` + index + '-'"
                  :collapse="true"
                  :taskCount="ntaskCount"
                  :scoreCount="nscoreCount"
                  :start="0"
                  :end="100"
                  :smallCharts="true"
                />
              </div>
            </div>
          </template>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import echartsBar from '@/components/echarts/echartsBar'
import echartsLine from '@/components/echarts/echartsLine'

export default {
  components: {
    echartsBar,
    echartsLine,
  },
  data() {
    return {
      activeNames: [],
      ntaskCount: [], // 统计任务
      nfinshCount: {}, // 统计任务完成状态
      nscoreCount: {}, // 统计分数
    }
  },
  props: {
    item: Object,
    index: Number,
    taskCount: Array,
    finshCount: Object,
    scoreCount: Object,
    studyCount: Number,
  },
  watch: {
    taskCount(n, o) {
      this.filterTaskData(n)
    },
    finshCount(n, o) {
      this.filterFinish(n)
    },
    scoreCount(n, o) {
      this.filterScore(n)
    },
  },
  methods: {
    // 收起折叠组件
    retractTasks() {
      this.$refs.tasks.handleHeaderClick()
    },
    // 刷新
    handelRefresh() {
    },
    // 过滤对应的任务
    filterTaskData(n) {
      let findThisGroup = n.filter(
        (item) => item.taskGroupID === this.item.taskGroupID
      )
      this.ntaskCount = findThisGroup
    },
    // 过滤对应任务的状态
    filterFinish(n) {
      let nFinish = {
        finishedStuCount: [], // 完成
        studyingStuCount: [], // 在学
        notStartStuCount: [], // 未学
      }
      this.taskCount.forEach((item, index) => {
        if (item.taskGroupID === this.item.taskGroupID) {
          nFinish.finishedStuCount.push(n.finishedStuCount[index])
          nFinish.studyingStuCount.push(n.studyingStuCount[index])
          nFinish.notStartStuCount.push(n.notStartStuCount[index])
        }
      })
      this.nfinshCount = nFinish
    },
    // 过滤对应任务的分数
    filterScore(n) {
      let nScore = {
        maxScore: [], // 最高分
        avgScore: [], // 平均分
        minScore: [], // 最低分
      }
      this.taskCount.forEach((item, index) => {
        if (item.taskGroupID === this.item.taskGroupID) {
          nScore.maxScore.push(n.maxScore[index])
          nScore.avgScore.push(n.avgScore[index])
          nScore.minScore.push(n.minScore[index])
        }
      })
      this.nscoreCount = nScore
    },
    // 执行过滤
    handelChange() {
      this.filterTaskData(this.taskCount)
      this.filterFinish(this.finshCount)
      this.filterScore(this.scoreCount)
    },
  },
}
</script>

<style lang="stylus">
.collapseEcharts {
  .el-collapse {
    border: 0;

    .el-collapse-item {
      padding: 23px 0 25px;
      margin-top: 31px;
      background-color: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
      border-radius: 18px;
      transition: all 0.2s linear;

      .el-collapse-item__header, .el-collapse-item__wrap {
        border: 0;
      }

      .el-collapse-item__header {
        padding: 0 31px 2px 26px;
        align-items: center;
        justify-content: space-between;
        height: auto;
        line-height: 1;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        transition: all 0.1s linear;

        .el-badge__content {
          right: 0;
          top: -7px;
          width: 12px;
          height: 12px;
          border: none;
        }

        .refreshIcon {
          margin-left: 18px;

          img {
            margin: 0;
            width: 21px;
            height: 20px;
          }
        }

        img {
          vertical-align: bottom;
          margin-right: 8px;
          object-fit: cover;
          user-select: none;
          height: 22px;
        }

        .el-collapse-item__arrow {
          margin: 0;
        }

        .el-collapse-item__arrow .el-icon-arrow-right {
          display: none;
        }

        .el-icon-arrow-right:before {
          content: none;
        }

        .taskController {
          margin: 0 45px 0 auto;

          button {
            cursor: pointer;
            outline: none;
            width: 72px;
            height: 29px;
            border-radius: 5px;
            border: none;
            font-family: Yu Gothic UI;
            font-size: 14px;
            color: #ffffff;
          }

          .saveData {
            margin-right: 20px;
            background: #f6ad35;
          }

          .startLearning {
            background: #f6ad35;
          }

          .endLearn {
            background: #02497c;
          }

          .reLearning {
            background: #5ad551;
          }
        }

        .icondown2Box {
          margin: 0 0 0 auto;
          transition: transform 0.2s linear;

          .icondown2 {
            font-size: 22px;
            color: #8a8a8a;
          }

          .downIcon {
            margin: 0;
            object-fit: cover;
            height: 100%;
          }
        }

        .taskName {
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #000000;
        }
      }

      .el-collapse-item__wrap {
        // background: #f9f9f9;
        .el-collapse-item__content {
          position: relative;
          padding-bottom: 52px;

          .retract {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 4px;
            left: calc(((100% - 50px) / 2));
            background: #bfbfbf;
          }

          .task-content {
            padding: 0;

            .echartsBox-collapse {
              display: flex;
              justify-content: space-around;
              align-items: center;
              width: 100%;
            }
          }
        }
      }
    }

    .is-active {
      position: relative;
      background-color: #f9f9f9;

      .el-collapse-item__wrap {
        background: #f9f9f9;
      }

      .el-collapse-item__header {
        padding-bottom: 24px;
      }

      .icondown2Box {
        transform: rotate(180deg);
      }
    }
  }
}
</style>